<template>
  <div class="user">
    <user-search
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    ></user-search>
    <user-content
      ref="contentRef"
      @edit-click="handleEditClick"
      @new-click="handleNewClick"
    ></user-content>
    <user-modal ref="modalRef"></user-modal>
  </div>
</template>

<script lang="ts" setup>
import UserModal from './c-cpns/user-modal.vue'
import { ref } from 'vue'
import UserSearch from './c-cpns/user-search.vue'
import userContent from './c-cpns/user-content.vue'
import { handleCurrentChange } from 'element-plus/es/components/tree/src/model/util.mjs'
//对contentRef进行类型约束，约束为userContent组件实例类型
const contentRef = ref<InstanceType<typeof userContent>>()
/**
 * 处理查询点击事件
 *
 * @param formData 查询表单数据
 */
function handleQueryClick(formData: any) {
  contentRef.value?.fetchUsersListData(formData)
}
function handleResetClick() {
  contentRef.value?.fetchUsersListData()
}
const modalRef = ref<InstanceType<typeof UserModal>>()
function handleNewClick() {
  modalRef.value?.setModalVisible()
}
function handleEditClick(itemData: any) {
  modalRef.value?.setModalVisible(false, itemData)
}
</script>

<style lang="less" scoped></style>
